<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>选择</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户类型</label>
                            <div class="layui-input-inline">
                                <select name="type" lay-verify="required" lay-reqtext="类型不能为空"  >
                                    <option value="">请选择</option>
                                    <option value="0">管理员</option>
                                    <option value="1">宿管员</option>
                                    <option value="2">学生</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-submit">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <button class="layui-btn layui-btn-warm layuiadmin-btn-list" id="edit">
                    <i class="layui-icon layui-icon-edit layuiadmin-button-btn"></i>完成编辑
                </button>
            </div>

        </fieldset>

        <ul id="menuId" class="ztree"></ul>
    </div>
    <!--    <input type="text" id="demo"  class="layui-input"/>-->
</div>
<script>
    layui.use(['form','element','axios','ztree','layer','table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            axios = layui.axios,
            layer = layui.layer,
            table = layui.table,
            ztree = layui.ztree
        form.render() //处理有时候下拉框会消失
        var seleted = 0
        var type = ""
        function createTree(url, treeId) {
            var zTree; //用于保存创建的树节点
            var setting = { //设置
                check: {
                    enable: true
                },
                view: {
                    showLine: true, //显示辅助线
                    dblClickExpand: true, //双击是否展开父节点
                },

                data: {
                    key:{
                        name:'title',
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: 0
                    }
                }
            };
            axios({
                method:"get",
                url:url,
            }).then(data=>{
                ztree.init($(treeId), setting, data.data.menu);
            }).catch(data=>{
                layer.msg("请求错误",{
                  icon:5,
                  time:2000,
                  anim:6
                })
            });
        }
        createTree("/menu/getAll", "#menuId"); //创建
        form.on('submit(search-submit)',function (data) {
            data = data.field
            axios({
                method:"post",
                url:"/menu/checked/"+data.type
            }).then(res=>{
                type = data.type
                seleted = 1
                treeObj = ztree.getZTreeObj("menuId");//treeDemo界面中加载ztree的div
                treeObj.checkAllNodes(false);
                for (var i=0;i<res.data.ids.length;i++)
                 {
                     console.log(res.data.ids[i])
                     let checkNodes = treeObj.getNodesByParam("id",res.data.ids[i]);
                     treeObj.checkNode(checkNodes[0],true);//选中
                 }
            }).catch(errors=>{
                layer.msg("请求错误",{
                  icon:5,
                  time:2000,
                  anim:6
                })
            })
            return false;
        });

        $('#edit').click(function () {
            if(seleted==0){
                layer.msg("请选择用户类型",{
                  icon:5,
                  time:2000,
                  anim:6
                })
            }else{
                layer.confirm('真的要编辑权限吗？', function (index) {
                    var treeObj = ztree.getZTreeObj("menuId");
                    var nodes = treeObj.getChangeCheckedNodes();
                    console.log(nodes)
                    let ids = []
                    for(var i = 0;i<nodes.length;i++){
                        ids[i] = nodes[i].id
                    }
                    axios.post("/role-menu/edit/"+type+"/"+ids)
                        .then(data=>{
                            layer.msg(data.message,{
                              icon:6,
                              time:2000
                            },function () {
                              //处理修改完权限之后，刷新显示的菜单
                              window.location = 'index.html';
                            })
                        }).catch(error=>{
                          layer.msg("请求错误",{
                            icon:5,
                            time:2000,
                            anim:6
                          })
                      });
                });
            }
        });
    });

</script>
